<template>
	<view>
		<!-- 头部区域 -->
		<view class="headBox">
			<!-- <view class="navigationBarTitleText">成都群光广场</view> -->
			<view class="navBox">
				<view class="navItems" v-for="(item,index) in navList" :key="index">
					<u-icon :name="item.navImg" :size="70"></u-icon>
					<text class="navName">{{item.navName}}</text>
				</view>
			</view>
			<!-- 功能区域 -->
			<view class="funBox">
				<u-grid :col="4" :border="false">
					<u-grid-item v-for="(item, index)  in thirdpartyList" :key="index">
						<u-icon :name="item.thirdpartyImg" :size="80"></u-icon>
						<view class="grid-text">{{ item.thirdpartyName }}</view>
					</u-grid-item>
				</u-grid>
			</view>
			<view class="mineBox">
				<view class="leftBox">
					<view class="upperLeft">
					</view>
					<view class="leftLower">
					</view>
				</view>
				<view class="rightBox">
					<swiper class="imgSwiper" :autoplay="true" :interval="3000" 
						touchable="false" :touchable="false">
						<swiper-item class="imgSwiperItem" >
							<!-- <image :src="imageUrl" mode="aspectFit"></image> -->
							<view class="imgs" :style="{ backgroundImage: 'url(' + imageUrl + ')'}"></view>
						</swiper-item>
						<swiper-item class="imgSwiperItem">
							<view class="imgs" :style="{ backgroundImage: 'url(' + imageUrl + ')'}"></view>
						</swiper-item>
					</swiper>
				</view>
			</view>

		</view>
		<!-- 内容区域 -->
		<view class="contentBox">
			<view class="cardBox" :style="{ backgroundImage: 'url(' + imageUrl2 + ')'}">
				<swiper class="swiper" :autoplay="true" :interval="3000" :vertical="true" circular="true" disable-touch="true" style=" pointer-events: none;"
					:touchable="true">
					<swiper-item class="swiperItem" >
						<view class="itemView">
							<text>25人</text>
							<u-icon name="bell-fill" size="40" style="margin: 0 5upx;"></u-icon>
							<text>浏览</text>
						</view>
					</swiper-item>
					<swiper-item class="swiperItem" >
						<view class="itemView">
							<text>25人</text>
							<u-icon name="thumb-up-fill" color="#E16C0A" size="40" style="margin: 0 5upx;"></u-icon>
							<text>点赞</text>
						</view>
					</swiper-item>
				</swiper>
			</view>
			<view class="cardBox" :style="{ backgroundImage: 'url(' + imageUrl + ')'}">
				<swiper class="swiper" :autoplay="true" :interval="3000" :vertical="true" :circular="true"
					disable-touch="true" touchable="false">
					<swiper-item class="swiperItem">
						<view class="itemView">
							<text>25人</text>
							<u-icon name="bell-fill" size="40"></u-icon>
							<text>浏览</text>
						</view>
					</swiper-item>
					<swiper-item class="swiperItem">
						<view class="itemView">
							<text>25人</text>
							<u-icon name="thumb-up-fill" color="#E16C0A" size="40"></u-icon>
							<text>点赞</text>
						</view>
					</swiper-item>
				</swiper>

			</view>

		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				imageUrl: 'https://res.cc.cmbimg.com/fsp/File/G20230731G4004926054G31312D32323130382D5C315C.DAT',
				imageUrl2: 'https://res.cc.cmbimg.com/fsp/File/AtpResource/55903398e7e64d71b5d0fb2c1696d849.gif',
				like: 100, // 点赞数
				currentCount: 200, // 浏览数
				showLike: true, // 控制显示点赞数或浏览数
				navList: [{
						navName: '会员注册',
						navImg: ''
					}, {
						navName: '停车缴费',
						navImg: '',
					},
					{
						navName: '销售补录',
						navImg: ''
					},
					{
						navName: '开具发票',
						navImg: '',
					},
					// {
					// 	navName: '充电宝',
					// },
				],

				thirdpartyList: [{
						thirdpartyName: '领券中心',
						thirdpartyImg: '',
					},
					{
						thirdpartyName: '我的商城',
						thirdpartyImg: '',
					},
					{
						thirdpartyName: '手机充电',
						thirdpartyImg: ''
					},
					// {
					// 	thirdpartyName: '我的卡包',
					// 	thirdpartyImg: ''
					// },
					// {
					// 	thirdpartyName: '我的积分',
					// 	thirdpartyImg: ''
					// },

					// {
					// 	thirdpartyName: '我的订单',
					// 	thirdpartyImg: ''
					// },
					// {
					// 	thirdpartyName: '我的报名',
					// 	thirdpartyImg: ''
					// },

					// {
					// 	thirdpartyName: '扫码购',
					// 	thirdpartyImg: ''
					// },
					{
						thirdpartyName: '群光活动',
						thirdpartyImg: ''
					},


				]
			}
		},
		onPageScroll(event) {
			const scrollTop = event.scrollTop;

			if (scrollTop > 0) {
				// 根据滚动位置动态设置导航栏背景颜色
				const backgroundColor = scrollTop > 100 ? '' : '#3e3f42';

				// 使用小程序 API 设置导航栏背景颜色
				wx.setNavigationBarColor({
					frontColor: '#000000', // 导航栏文字颜色，可选值为 white / black
					backgroundColor: "#ffffff", // 导航栏背景颜色
				});
			} else {
				wx.setNavigationBarColor({
					frontColor: '#000000', // 导航栏文字颜色，可选值为 white / black
					backgroundColor: "#CEBB9B", // 导航栏背景颜色
				});
			}
		},
		onLoad() {
			wx.setNavigationBarColor({
				frontColor: '#ffffff', // 导航栏文字颜色，可选值为 white / black
				backgroundColor: "#CEBB9B", // 导航栏背景颜色
			});
		},
		methods: {
			onstoptouchmove() {
				return false;
			},
			stopTouchMove() {
				return false
			},

		}
	}
</script>
<style lang="scss">
	page {
		background-color: #F0F0F0;
		padding-bottom: 50upx;
	}

	.headBox {
		border-bottom: 1px solid #F0F0F0;
		// #CF917A #3e3f42 #ccae7a #f0d9a9 #b2945e #FED000 #FFB224 #98DEFF #61A44D #f3a03a #446cdd #ff8300 #CEBB9B
		background: linear-gradient(to bottom, #CEBB9B, #F0F0F0);

		.navigationBarTitleText {
			text-align: center;
			padding: 20upx;
			padding-top: 110upx;
			font-weight: 500;
			font-size: 30upx;
		}

		.navBox {
			padding: 40upx 0;
			display: flex;
			justify-content: space-around;

			.navItems {
				display: flex;
				flex-direction: column;
				align-items: center;

				.navName {
					margin: 10upx 0;
					color: #fff;
					font-size: 24upx;
					font-weight: 500;
					letter-spacing: 5upx;
					margin-left: 5upx;
				}
			}
		}

		.funBox {
			margin: 0 30upx;
			margin-bottom: 20upx;
			border-radius: 20upx;
			padding: 10upx;
			border: 1px solid #fff;
			background-color: #fff;
			transform: translate(2px, 2px);
			border: 1px solid rgba(0, 0, 0, 0.2);
		}

		.mineBox {
			margin: 30upx;
			background-color: #fff;
			border-radius: 10upx;
			border: 1px solid red;
			display: flex;
			justify-content: space-around;

			.leftBox {
				width: 50%;
				margin: 5upx;

				.upperLeft {
					display: flex;
					height: 155upx;
					border: 1px solid palevioletred;
					margin-bottom: 5upx;
				}

				.leftLower {
					border: 1px solid red;
					height: 155upx;
					margin-top: 5upx;
				}
			}

			.rightBox {
				margin: 5upx;
				width: 50%;

				.imgSwiper {
					height: 100%;

					.imgSwiperItem {
						.imgs {
							background-size: 100% 100%;
							height: 100%;
							border-radius: 8upx;
						}
					}
				}
			}
		}

	}

	.contentBox {
		margin: 0 30upx;

		.cardBox {
			margin: 10upx 0;
			width: 100%;
			height: 700upx;
			background-repeat: no-repeat;
			background-size: 100% 100%;
			border-radius: 8rpx;

			.swiper {
				align-items: center;
				height: 60px;
				padding: 0 20upx;
				padding-top: 20upx;
				width: 35%;
				margin-left: auto;

				.swiperItem {
					display: flex;
					align-items: center;
					justify-content: flex-end;
					margin-right: 20upx;

					.itemView {
						display: flex;
						justify-content: space-between;
						padding: 10upx 30upx;
						background-color: rgba(0, 0, 0, 0.5);
						border-radius: 50upx;
						color: #fff;
					}
				}
			}
		}

	}
</style>